<style lang="scss" scoped>
  .table_title {
    text-align: center;
    height: 32px;
    min-height: 32px;
    font-weight: bold;
  }

  .table_content {
    text-align: center;
    height: 32px;
    min-height: 32px;
    font-size: 14px;
  }

  .table_content:hover {
    cursor: pointer;
    background-color: #ebf7ff;
  }
</style>
<template>
  <div>
    <Form ref="teamInfo" :label-width="labelWidth" style="border: 1px solid #dcdee2;" label-position="right">
      <div style="padding: 10px;">
        <table width="100%">
          <tr class="table_title">
            <td width="10%">服务名称</td>
            <td width="50%">传输方式</td>
            <td width="10%">存储数据量</td>
            <td width="30%">测算依据</td>
          </tr>
          <tr class="table_content">
            <td>
              <Checkbox v-model="toolInfo.spContent.ifNeedPublicData" @on-change="showOpenMessage"
                style="font-size: 14px;" :disabled="ifedit"> 公有数据 </Checkbox>
            </td>
            <td>
              <CheckboxGroup v-if="isEdit != undefined && isEdit != 1" v-model="toolInfo.spContent.publicTransmisMode">
                <Checkbox style="font-size: 14px;" label="实时" :disabled="ifedit">实时</Checkbox>
                <Checkbox style="font-size: 14px;" label="离线" :disabled="ifedit">离线</Checkbox>
              </CheckboxGroup>
            </td>
            <td><Input v-if="isEdit != undefined && isEdit != 1" v-model="toolInfo.spContent.publicMemory"
                :readonly="ifedit" placeholder="每日传输数据量" /></td>
            <td><Input v-if="isEdit != undefined && isEdit != 1" v-model="toolInfo.spContent.publicPurpose"
                type="textarea" :autosize="{minRows: 1,maxRows: 6}" :readonly="ifedit" placeholder="每日传输数据量" /></td>
          </tr>
          <tr class="table_content">
            <td>
              <Checkbox v-model="toolInfo.spContent.ifNeedPrivateData" style="font-size: 14px;" :disabled="ifedit"> 私有数据
              </Checkbox>
            </td>
            <td>
              <CheckboxGroup v-model="toolInfo.spContent.privateTransmisMode">
                <Checkbox style="font-size: 14px;" label="实时" :disabled="ifedit">实时</Checkbox>
                <Checkbox style="font-size: 14px;" label="离线" :disabled="ifedit">离线</Checkbox>
              </CheckboxGroup>
            </td>
            <td><Input v-model="toolInfo.spContent.privateMemory" :readonly="ifedit" placeholder="每日传输数据量" /></td>
            <td><Input v-model="toolInfo.spContent.privatePurpose" type="textarea" :autosize="{minRows: 1,maxRows: 6}"
                :readonly="ifedit" placeholder="每日传输数据量" /></td>
          </tr>
        </table>
      </div>
      <template v-if="(((isEdit == 22 || isEdit == 21 || serviceType == 'resource_dataEtl') && toolInfo.resourceProgress && toolInfo.resourceProgress.length > 0) || (toolInfo.needResources && toolInfo.needResources.length > 0))
          && isEdit != undefined && isEdit != 1">
        <Divider> 默认资源 </Divider>
        <Row style="padding: 0 10px 10px;">
          <Col span="10">
          <i-switch v-model="toolInfo.default" @on-change="$forceUpdate()" v-if="!ifedit">
            <span slot="open">编辑</span>
            <span slot="close">默认</span>
          </i-switch>
          </Col>
          <Col span="24">
          <resourceTable v-if="(isEdit == 22 || isEdit == 21 || serviceType == 'resource_dataEtl')" :ifedit="ifedit" :type="'tool'"
            :isEditTool="toolInfo.default == 0 ? false : true" v-model="toolInfo.resourceProgress" :showborder="false"
            :columnsList="columnsList"></resourceTable>
          <resourceTable v-else :ifedit="ifedit" :type="'tool'" :isEditTool="toolInfo.default == 0 ? false : true"
            v-model="toolInfo.needResources" :showborder="false" :columnsList="columnsList"></resourceTable>
          </Col>
        </Row>
      </template>
      <template v-if="toolInfo.spContent.ifNeedPublicData">
        <Divider> 公有数据申请信息 </Divider>
        <Row>
          <Col span="8">
          <FormItem label="数据需求频率：">
            <Input v-if="ifedit" v-model="toolInfo.spContent.dataFrequent" :readonly="true" />
            <Select v-else v-model="toolInfo.spContent.dataFrequent">
              <Option value="临时">临时</Option>
              <Option value="周期">周期</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="8" class="col_left">
          <FormItem label="数据生效时间：" style="text-align: right">
            <Input v-if="ifedit" v-model="toolInfo.spContent.actTime" :readonly="true" />
            <DatePicker v-else type="datetime" format="yyyy-MM-dd" :options="disabledDate"
              v-model="toolInfo.spContent.actTime" style="width: 100%;" placeholder="当前默认账期"></DatePicker>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
          <FormItem label="抽样要求：">
            <Input v-model="toolInfo.spContent.extDemand" type="textarea" :autosize="{minRows: 1,maxRows: 4}"
              :readonly="ifedit" />
          </FormItem>
          </Col>
          <Col span="8" class="col_left" v-if="isEdit != undefined && isEdit != 1">
          <FormItem label="ETL工具：">
            <Input v-if="ifedit" v-model="toolInfo.spContent.etlTool" :readonly="true" />
            <RadioGroup v-else v-model="toolInfo.spContent.etlTool">
              <Radio label="UCX"></Radio>
              <Radio label="UAP"></Radio>
            </RadioGroup>
          </FormItem>
          </Col>
        </Row>
        <Row v-if="isEdit != undefined && isEdit != 1">
          <Col span="8">
          <FormItem label="是否安全审批：">
            <Input v-if="ifedit" v-model="toolInfo.spContent.isSafe" :readonly="true" />
            <RadioGroup v-else v-model="toolInfo.spContent.isSafe">
              <Radio label="否"></Radio>
              <Radio label="是"></Radio>
            </RadioGroup>
          </FormItem>
          </Col>
          <Col span="8" class="col_left">
          <FormItem label="安全加密要求：" >
            <Input v-model="toolInfo.spContent.encryption" type="textarea" :readonly="ifedit" :autosize="{minRows: 1,maxRows: 4}"/>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="22" style="width:96.666667%">
          <FormItem label="需求描述:">
            <Input v-model="toolInfo.spContent.reqDes" type="textarea" :autosize="{minRows: 1,maxRows: 4}"
              :readonly="ifedit" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="22" style="width:96.666667%">
          <FormItem label="备注:">
            <Input v-model="toolInfo.spContent.remark" type="textarea" :autosize="{minRows: 1,maxRows: 4}"
              :readonly="ifedit" />
          </FormItem>
          </Col>
        </Row>
        <dataInfo :Papply="toolInfo.spContent" :ifedit="ifedit"></dataInfo>
      </template>

      <template v-if="toolInfo.spContent.etlAccount">
        <Divider> 实际分配数据表名称 </Divider>
        <Row style="padding: 0 50px 10px;">
          <Col span="8">
          <FormItem label="ETL账号：" v-if="isEdit != undefined && toolInfo.spContent.etlAccount">
            <Input v-model="toolInfo.spContent.etlAccount" :readonly="ifedit" />
          </FormItem>
          </Col>
          <Col span="8" class="col_left" v-if="isEdit != undefined && toolInfo.spContent.etlPath">
          <FormItem label="采集数据目录：" v-if="isEdit != undefined">
            <Input v-model="toolInfo.spContent.etlPath" :readonly="ifedit" />
          </FormItem>
          </Col>
        </Row>
        <Row style="padding: 0 50px 10px;" v-if="toolInfo.spContent.customData">
          <Col span="24">
            <Table border :columns="etlDataColumns" :data="etlDataList" >
            </Table>
            <div v-if="etlTotal > 10" style="float: right;margin: 10px;">
              <Page :current="etlPage" :total="etlTotal" :page-size="etlTotalPageSize" show-total @on-change="changeEtlPage"></Page>
            </div>
          </Col>
        </Row>
      </template>
    </Form>
  </div>
</template>

<script>
  import dataInfo from "../../settledin/dataInfo.vue"
  import resourceTable from "../../../../base/tables"
  export default {
    name: "open_api_platform_model",
    components: {
      resourceTable,
      dataInfo
    },
    data() {
      return {
        etlTotalPageSize: 5,
        etlPage: 1,
        etlTotal: 0,
        etlDataList: [],
        etlDataColumns: [{
            title: "序号",
            type: 'index',
            width: 80,
            align: 'center'
          },
          {
            title: '表名',
            key: "dataName",
            align: 'center',
          }
        ],

        disabledDate: {
          disabledDate(date) {
            return date && date.valueOf() < Date.now() - 24 * 60 * 60 * 1000;
          }
        },
        isShow: false,
        showOpenDataMessage: false,
        spEtlTool: {
          ifNeedPublicData: false,
          publicTransmisMode: [],
          publicMemory: "",
          publicPurpose: "",
          ifNeedPrivateData: false,
          privateTransmisMode: [],
          privateMemory: "",
          privatePurpose: "",
          dataFrequent: "",
          extDemand: "",
          etlTool: "",
          etlPath: "",
          encryption: "",
          isSafe: "",
          reqDes: "",
          remark: "",
          datas: []
        },
        labelWidth: 140,
      }
    },
    props: {
      isEdit: {},
      value: {},
      ifedit: {},
      spContent: {},
      columnsList: {},
      serviceType: {}
    },
    created: function() {
      console.log("toolInfo ucx ----->", JSON.stringify(this.toolInfo.spContent), this.toolInfo, this.Papply)
      // this.getDefaultApiServList()
      if (!this.toolInfo.spContent) {
        this.toolInfo.spContent = this.spEtlTool
      }else if(this.toolInfo.spContent.customData){
          this.etlTotal = this.toolInfo.spContent.customData.length
          this.changeEtlPage(1)
        }
    },
    mounted() {

    },

    methods: {
      changeEtlPage(page) {
        this.etlPage = page
        var pageNumber = page * this.etlTotalPageSize
        if (pageNumber > this.etlTotal) {
          this.etlDataList = this.toolInfo.spContent.customData.slice((page - 1) * this.etlTotalPageSize, this.etlTotal)
        } else {
          this.etlDataList = this.toolInfo.spContent.customData.slice((page - 1) * this.etlTotalPageSize, pageNumber)
        }
      },
      showOpenMessage() {
        if (!this.isShow) {
          this.isShow = true
          this.showOpenDataMessage = true
        }
      },
      getSpContent() {
        // 如果spContent不为空，说明是草稿，为空则调接口获取
        if (this.toolInfo.reqId && this.toolInfo.id) {
          this.toolInfo.spContent = this.spEtlTool
          var param = {
            spServiceType: this.toolInfo.spServiceType,
            alloId: this.toolInfo.reqId ? this.toolInfo.reqId : this.toolInfo.id
          }
          var that = this
          this.myAjax.get({
            url: this.CONFIG.progress_url + "/sp-list/detail",
            that: that,
            params: param,
            success: function(data) {
              data.actTime = that.formatTime(data.actTime)
              if (data.ifNeedPublicData == 1) {
                data.ifNeedPublicData = true
              } else {
                data.ifNeedPublicData = false
              }
              if (data.ifNeedPrivateData == 1) {
                data.ifNeedPrivateData = true
              } else {
                data.ifNeedPrivateData = false
              }
              data.privateTransmisMode = JSON.parse(data.privateTransmisMode)
              data.publicTransmisMode = JSON.parse(data.publicTransmisMode)
              that.$set(that.toolInfo, "spContent", data)
              // that.$forceUpdate()
            },
          })
        } else {
          this.toolInfo.spContent = this.spEtlTool
        }
      },
      formatTime(value) {
        return this.utils.formatDate(new Date(value * 1000), "yyyy-MM-dd")
      },
    },
    computed: {
      toolInfo: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      }
    },
    watch: {
      toolInfo() {
          console.log("customData ------------>>>>>")
        if (!this.toolInfo.spContent) {
          this.getSpContent()
        }else if(this.toolInfo.spContent.customData){
          this.etlTotal = this.toolInfo.spContent.customData.length
          this.changeEtlPage(1)
        }
      }
    }
  }
</script>
